import React, { useState } from 'react'
import { Tabs, Card } from 'antd'
import { BookOutlined, UnorderedListOutlined } from '@ant-design/icons'
import DictType from './dictType/index'
import DictData from './dictData/index'

const { TabPane } = Tabs

const Index: React.FC = () => {
  const [activeTab, setActiveTab] = useState('types')
  const [selectedDictType, setSelectedDictType] = useState(null)

  // 查看字典数据
  const handleViewDictData = dictType => {
    setSelectedDictType(dictType)
    setActiveTab('data')
  }

  // 添加字典数据
  const handleAddDictData = dictType => {
    setSelectedDictType(dictType)
    setActiveTab('data')
  }

  // 返回字典类型列表
  const handleBackToTypes = () => {
    setSelectedDictType(null)
    setActiveTab('types')
  }

  return (
    <div className='dictionary-management'>
      <Card>
        <Tabs activeKey={activeTab} onChange={setActiveTab}>
          <TabPane
            tab={
              <span>
                <BookOutlined />
                字典类型
              </span>
            }
            key='types'
          >
            <DictType
              onViewDictData={handleViewDictData}
              onAddDictData={handleAddDictData}
            />
          </TabPane>

          <TabPane
            tab={
              <span>
                <UnorderedListOutlined />
                字典数据
              </span>
            }
            key='data'
          >
            <DictData
              selectedDictType={selectedDictType}
              onBack={handleBackToTypes}
            />
          </TabPane>
        </Tabs>
      </Card>
    </div>
  )
}

export default Index
